<template>
	<view class="content">
		<view class="newsList">
			<view class="newsItem" v-for="(item, index) in newsList" :key="index" @click="toDetail(index)">
				<view class="newsItemL">
					<text class="T1">{{ item.title }}</text>
					<text class="T2">{{ item.publishDate.slice(0, 10) }}</text>
				</view>
				<image :src="item.image" style="width: 150rpx;height: 122rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
import * as api from '@/api/login';
export default {
	data() {
		return {
			userId: '',
			newsList: [],
			currentIndex: 0, //当前所在的位置
			moveLength: 10 //需要的条数
		};
	},
	onLoad(option) {
		let userId = this.$store.state.userInfo.currentUser.userId;
		// 默认初始加载 10条最新的数据
		this.getNewsInfo(this.currentIndex, this.moveLength);
	},
	// 页面触底事件监听
	onReachBottom() {
		console.log('onReachBottom');
		this.getNewsInfo(this.currentIndex, this.moveLength);
	},
	methods: {
		getNewsInfo(startWith, moveLength) {
			let that = this;
			let data = {
				userId: that.$store.state.userInfo.currentUser.userId,
				action: 'getContent',
				params: {
					channelName: '新闻资讯',
					startWith: startWith,
					moveLength: moveLength
				}
			};
			api.getContent(data)
				.then(function(res) {
					// console.log('getContent success', res);
					if (res.data.code == 2000) {
						if(res.data.data.Content.length <= that.newsList.length) {
							that.$toast('没有更多数据了')
							return;
						}
						that.newsList = res.data.data.Content;
						that.moveLength += res.data.data.Content.length;
					}
				})
				.catch(function(error) {
					console.log('getContent fail', error);
				});
		},
		// 跳转到详情页面
		toDetail(index) {
			let that = this;
			uni.navigateTo({
				url: '../contentDetail/contentDetail?url=' + that.newsList[index].accessUrl
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fafafa;
}

.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.newsList {
	margin-top: 36rpx;
	margin-bottom: 36rpx;
	width: 700rpx;
	height: 100%;
	border-radius: 15rpx;
	background-color: #ffffff;
}
.newsItem {
	margin: 50rpx 35rpx 0;
	/* width: 100%; */
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.newsItemL {
	width: 435rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}
.T1 {
	font-size: 34rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.T2 {
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #999999;
}
</style>
